<script setup>
	import {
		ref,
		getCurrentInstance,
		computed,
		onMounted,
		reactive,
		toRefs,
	} from 'vue'
	import { Search } from '@element-plus/icons-vue'
	import { useStore } from 'vuex'
	import { useRoute, useRouter } from 'vue-router'

	const store = useStore()
	const router = useRouter()
	const { proxy } = getCurrentInstance()

	const backToIndex = () => {
		router.push('/')
	}

	const toUrl = (url) => {
		if (url.slice(0, 1) == '/') {
			router.push(url)
		} else {
			window.open(url, '_blank')
		}
	}

	// 顶栏右侧列表
	const item = reactive([
		{ title: 'Gitee文档', eng: 'SOURCE', url: 'https://gitee.com/DJXCK/free-rs' },
		{ title: '新手指引', eng: 'GUIDE', url: '/documentPage' },
		{
			title: '访问官网',
			eng: 'OFFICIAL',
			url: 'https://www.paddlepaddle.org.cn/',
		},
	])
</script>

<template>
	<div class="topbar">
		<!-- 顶栏左右两部分 -->
		<div class="topbar-left">
			<div class="topbar-logo" @click="backToIndex()">
				<!-- 导入logo -->
			</div>
		</div>
		<div class="topbar-right">
			<div v-for="i in item" @click="toUrl(i.url)" class="top-right-item">
				<div>
					{{ i.title }}
				</div>
				<div>
					{{ i.eng }}
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped lang="less">
	// 顶栏
	.topbar {
		height: 100%;
		width: 100%;
		// background-color: rgb(83, 211, 243);
		background-image: linear-gradient(
			to right,
			rgb(83, 211, 243),
			rgb(128, 182, 244)
		);

		display: flex;
		justify-content: space-between;
		transition: all 0.5 ease;

		// 顶栏左侧css
		> .topbar-left {
			width: 35%;
			display: flex;
			align-items: center;
			flex-direction: row;

			> .topbar-logo {
				margin: 0px 10px;
				width: 160px;
				height: 100%;
				background: url(//aistudio-fe-online.cdn.bcebos.com/aistudio/dist/1654745549749/images/home/paddle-AIStudio.png)
					no-repeat;
				background-size: contain;
				cursor: pointer;
			}
		}
		// }
		// 顶栏右侧css
		> .topbar-right {
			width: 25%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-direction: row;
			position: relative;

			.top-right-item {
				width: 33.3%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				cursor: pointer;
				color: white;
				transform: scale(1);
				transition: all 0.2s;
			}
			.top-right-item:hover {
				transform: scale(1.2);
				color: black;
			}

			//帮助div样式
			.help-doc_div {
				a {
					transform: scale(1);
					transition: all 0.3s ease-out;
				}
				a:hover {
					transform: scale(1.2);
				}
			}
		}
	}
</style>
